<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/2/27
  Time: 20:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>日志管理模块</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js" type="text/javascript"></script>
</head>
<body>
    <!--搜索框-->
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="logType" id="search" placeholder="请输入要搜索的日志类型"/>
        </div>
    </div>
    <button class="layui-btn layui-btn-sm" id="searchBtn">搜索</button>
    <!--复选框组件toolbar-->
        <script type="text/html" id="bar">
            <a class="layui-btn layui-btn-xs" id="deleteCheckbox">批量删除</a>
    </script>
    <!--展示表格-->
    <table id="myTable"></table>
    <script>
        layui.use('table',function () {
            var table = layui.table;
            var $ = layui.$;
            //渲染表格
            var tableIns = table.render({
                elem:'#myTable',
                url:'${pageContext.request.contextPath}/cmfzLog/select',
                toolbar:"#bar",//开启头部工具栏，并为其绑定左侧模板  这里的bar是批量删除所在的工具栏id
                page:true,
                limit:7,
                limits:[7,8,9],
                cols:[[
                    {fixed: 'left', type:'checkbox'},//type为多选框类型
                    {field:'logId',title:'编号',width:100,sort:true},
                    {field:'adminId',title:'操作人编号',width:100,sort:true},
                    {field:'logDate',title:'操作日期',width:120,sort:true},
                    {field:'logIp',title:'操作IP',width:120,sort:true},
                    {field:'logContent',title:'操作内容',width:180,sort:true},
                    {field:'logType',title:'操作类型',width:100,sort:true}
                ]]
            })
            //搜索查询  这个搜索是div组件 不是form表单组件  所以这里不是form表单提交事件 二是点击事件
            $('#searchBtn').click(function () {
                tableIns.reload({
                    where:{
                        logType:$('#search').val()
                    },page: {
                        curr:1
                    }
                })
            })
            //批量删除操作
            $('#deleteCheckbox').click(function () {
                //layui文档的数据table组件右侧菜单的基础方法中，有个获取选中行
                var checkStatus = table.checkStatus('myTable'); //myTable 即为基础参数（表格） id 对应的值
                console.log(checkStatus.data) //获取选中行的数据（这是一个数组）
                console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
                console.log(checkStatus.isAll ) //表格是否全选
                //首先 判断获取的选中行是否为0   即是否至少选择了一行数据
                if(checkStatus.data.length==0){
                    layer.msg('请至少选择一个要删除的数据');
                    return;//这个返回一定不能忘
                }
                //准备一个数组  保存选中的行id  作为要传递的参数
                var ids = [];
                //遍历选中的所有数据  将其中的id一一保存到数组中
                for(var i=0;i<checkStatus.data.length;i++){
                    //checkStatus.data[i]  这只是每一行的数据
                    ids.push(checkStatus.data[i].logId);
                }
                //发送ajax请求  执行批量删除操作
                $.ajax({
                    url:'${pageContext.request.contextPath}/cmfzLog/removeAny',
                    data:'ids='+ids,
                    success:function (result) {
                        if(result.flag){
                            layer.msg('批量删除成功');
                            tableIns.reload();
                        }else {
                            layer.msg('批量删除成功');
                        }
                    }
                })
            })
        })
    </script>
</body>
</html>
